Community

About

This Network Traffic Analyzer shows live activity as it happens, translating raw packets into something readable and calm. You can watch traffic flow in real time, filter by protocol or address, and zoom into any packet for clear, understandable details. Nothing feels rushed or hidden. Patterns that surface naturally: A map reveals where traffic comes from while simple charts show when usage rises or spikes. Subtle alerts draw attention to unusual behavior without shouting. You can pause time, replay activity, and export what matters. Preferences stay remembered while the interface stays out of the way. The result is a tool that makes networks feel less like noise and more like signals. Designed for general users who want clarity, confidence, and control without needing to think like a network engineer. IMPORTANT NOTE: This template contains mock packet data. For #real life" usage you will need to connect your own web socket and backend service. ---------------------------------------------- FULL SPEC LIST: ## **NTA Core Monitoring Features** **Real-time Packet Stream** - Live capture and display of network packets with color-coded protocols (TCP, UDP, HTTP, HTTPS, DNS, FTP, SSH, ICMP) - Toggleable compact/expanded view modes - compact shows single-line entries, expanded displays detailed multi-row cards - Suspicious packet detection with automatic red highlighting and toast notifications - Maximum buffer of 500 packets to maintain performance - Click any packet to open detailed inspection modal showing full headers, TCP flags, payload size, and geolocation data **Packet Search & Filtering** - Real-time search bar to filter packets by IP address, port number, or protocol name - Multi-select protocol filters with persistent preferences saved to localStorage - Quick filter chips for instant protocol isolation - Clear all filters button with keyboard shortcuts **Interactive Context Menu** - Right-click on any packet for quick actions: - View packet details - Copy source/destination IP addresses to clipboard - Copy source/destination ports - Investigate IP via WHOIS lookup (opens external tab) - Export individual packet as JSON - Block source IP (with visual feedback) ## **Data Visualization** **Traffic Origins Map** - Interactive world map using realistic dotted continent outlines - Color-coded location markers by protocol type - Pulsing circles indicating traffic intensity at each location - Hover tooltips showing city/country name, total packets, and protocol breakdown - Smart tooltip positioning (appears below for northern locations, above for southern) - Dark theme optimized with no connecting lines for clean visualization **Traffic Intensity Heatmap** - 24-hour activity visualization in 15-minute time blocks - Color gradient from blue (low activity) to red (high activity) - Shows hourly traffic patterns to identify peak usage times - Helps detect anomalies and unusual traffic spikes **Enhanced Statistical Charts** - Animated area chart showing bandwidth over time with gradient fills - Protocol distribution bar chart with color-coded protocols - Smooth transitions and real-time updates - Hover interactions for detailed data points **Bandwidth Meters** - Circular progress indicators for incoming/outgoing traffic - Real-time packet per second calculations - Gradient color fills with animated updates ## **Advanced Analytics** **Real-time Statistics Dashboard** - Network Health Score (0-100) calculated from suspicious activity and traffic patterns - Color-coded health indicator (green/yellow/red) - Top traffic sources with packet counts and trend indicators - Most active destination ports with usage percentages - Unique IP tracking (sources and destinations) - Average packet size calculations - Protocol distribution with visual breakdowns and percentages **Active Connection Tracker** - Live table of all active connections - Shows source/destination IPs, ports, protocols, states, and packet counts - Duration tracking for each connection - Connection state indicators (ESTABLISHED, SYN_SENT, CLOSED, etc.) ## **Security Features** **Threat Detection & Alerts System** - Four configurable detection rules running every 5 seconds: - **Port Scanning Detection**: Identifies when a single IP accesses 10+ unique ports in 30 seconds - **DDoS Attack Detection**: Triggers when 50+ connections from a single IP occur in 10 seconds - **Suspicious Protocol Activity**: Monitors for 20+ packets from uncommon protocols in 20 seconds - **Repeated Connection Attempts**: Flags 15+ connection attempts to the same destination in 15 seconds - Color-coded severity levels (Critical in red, High in orange, Medium in yellow) - Dismissible alert cards with timestamps - Prevents duplicate alerts from flooding the interface - Clear all alerts functionality ## **Playback & Analysis Tools** **Packet Replay Controls** - Pause live capture to review historical packets - Step forward/backward through packet history one at a time - Variable playback speeds: 0.25x, 0.5x, 1x (normal), 2x, 4x, 8x - Seekable timeline slider to jump to specific points in history - Play/pause toggle for automatic replay - Reset button to return to live capture mode - Current position indicator showing packet index ## **Data Management** **Export Functionality** - Export all captured packets as JSON - Export filtered packets based on current search/filter criteria - Individual packet export via context menu - Browser-based download with formatted filenames **Session Persistence** - Protocol filter preferences saved to localStorage - View mode preference (compact/expanded) persists across sessions - Automatic restoration of user preferences on page load ## **User Interface** **Tab-Based Navigation** - Live Stream: Real-time packet monitoring - Statistics: Charts, heatmap, and analytics - Connections: Active connection tracking - Map: Geographic traffic visualization **Control Panel** - Pause/Resume capture button - Clear all data button - Export data button - Packet search input - Protocol filter toggles - View mode toggle (compact/expanded) - Replay controls (when paused) **Command Palette** - Keyboard shortcut support (⌘K or Ctrl+K) - Quick protocol filtering - Rapid navigation between features **Dark Theme Design** - Cybersecurity-focused dark aesthetic - Glassmorphism effects with backdrop blur - Consistent color coding across all components - 1px stroke width icons for refined appearance - Monospace fonts for technical data display ## **Technical Details** **Performance Optimizations** - 500 packet buffer limit to prevent memory issues - Throttled updates maintaining 60fps - React.memo on chart components - useMemo for statistical calculations - Efficient state management with useReducer **Data Generation** - Realistic mock packet data with proper IPv4/IPv6 addresses - Authentic port numbers (80, 443, 53, 22, 21, etc.) - Proper TCP flags and protocol headers - Geolocation data for major world cities - Traffic burst patterns and timing simulation